<template>
	<div>
		<router-view name="second"></router-view>
		<div class="footer">
			<a href="#/HomePage" :class="{heightLight:footernum==1}" @click="footerChange($event,1)">
				<span class="shouye"></span><br />
				首页
			</a>
			<a href="#/Classify" :class="{heightLight:footernum==2}" @click="footerChange($event,2)">
				<span class="fenlei"></span><br />
				分类
			</a>
			<a href="#/StockOutKing" :class="{heightLight:footernum==3}" @click="footerChange($event,3)" >
				<span class="duanhuo"></span>
			</a>
			<a href="#/ShoppingCart" :class="{heightLight:footernum==4}" @click="footerChange($event,4)">
				<span class="gouwu"></span><br />
				购物车
			</a>
			<a href="#/PersonalCenter/0" :class="{heightLight:footernum==5}" @click="footerChange($event,5)">
				<span class="geren"></span><br />
				个人中心
			</a>
		</div>
	</div>
</template>
<script>

	export default {
	  name: 'Index',
	  data(){
			return{
				footernum:1
			}
		},
		created:function(){
			switch (this.$route.path){
		    		case "/HomePage":{
		    			this.footernum=1;
		    			break;
		    		}
		    		case "/Classify":{
		    			this.footernum=2;
		    			break;
		    		}
		    		case "/StockOutKing":{
		    			this.footernum=3;
		    			break;
		    		}
		    		case "/ShoppingCart":{
		    			this.footernum=4;
		    			break;
		    		}
		    		case "/PersonalCenter/1":{
		    			this.footernum=5;
		    			break;
		    		}
		    		case "/PersonalCenter/0":{
		    			this.footernum=5;
		    			break;
		    		}
		    }
		},
		methods:{
			footerChange:function(e,i){
				this.footernum=i;
//				$(".footer a").removeClass("heightLight");
//				$(e.currentTarget).addClass("heightLight");
			}
		},
		beforeRouteUpdate (to, from, next) {
			console.log(1)
		    // 在当前路由改变，但是该组件被复用时调用
		    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
		    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
		    // 可以访问组件实例 `this`
		    switch (to.path){
		    		case "/HomePage":{
		    			this.footernum=1;
		    			break;
		    		}
		    		case "/Classify":{
		    			this.footernum=2;
		    			break;
		    		}
		    		case "/StockOutKing":{
		    			this.footernum=3;
		    			break;
		    		}
		    		case "/ShoppingCart":{
		    			this.footernum=4;
		    			break;
		    		}
		    		case "/PersonalCenter/1":{
		    			this.footernum=5;
		    			break;
		    		}
		    		case "/PersonalCenter/0":{
		    			this.footernum=5;
		    			break;
		    		}
		    }
		    next()
		  },
		  beforeRouteEnter (to, from, next) {
		    console.log(2)
		    next(vm=>{
		    		switch (to.path){
			    		case "/HomePage":{
			    			vm.footernum=1;
			    			break;
			    		}
			    		case "/Classify":{
			    			vm.footernum=2;
			    			break;
			    		}
			    		case "/StockOutKing":{
			    			vm.footernum=3;
			    			break;
			    		}
			    		case "/ShoppingCart":{
			    			vm.footernum=4;
			    			break;
			    		}
			    		case "/PersonalCenter/1":{
			    			vm.footernum=5;
			    			break;
			    		}
			    		case "/PersonalCenter/0":{
		    			vm.footernum=5;
		    			break;
		    		}
			    }
		    });
		    
		 }
	}
	
</script>
<style scoped="scoped">
	.footer{
		width: 100vw;
		height:10vh;
		background-color: white;
		position:fixed;
		bottom:0;
		left:0;
		box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
		z-index: 10;
	}
	.footer a{
		display: inline-block;
		width: 15%;
		text-align: center;
		line-height: 1rem;
		margin:1.5vh 2%;	
		font-size: 1rem;
		color:black;
	}
	.footer a span{
		display: inline-block;
		height:4.5vh;
		width: 4.5vh;
	}
	.footer a .duanhuo{
		width: 120%;
		height: 6vh;
		margin-left:-10%;
		background: url(../assets/C-index/断货王.png) no-repeat center center;
		background-size:  100%;
		vertical-align: 0rem;
	}
	.footer .heightLight{
		color:red;
	}
	.shouye{
		background: url(../assets/C-index/首页前.png) no-repeat;
		background-size: auto 100%;
	}
	.heightLight .shouye{
		background-image: url(../assets/C-index/首页后.png);
	}
	.shouye{
		background: url(../assets/C-index/首页前.png) no-repeat;
		background-size: auto 100%;
	}
	.heightLight .shouye{
		background-image: url(../assets/C-index/首页后.png);
	}
	.fenlei{
		background: url(../assets/C-index/分类前.png) no-repeat;
		background-size: auto 100%;
	}
	.heightLight .fenlei{
		background-image: url(../assets/C-index/分类后.png);
	}
	.gouwu{
		background: url(../assets/C-index/购物车前.png) no-repeat;
		background-size: auto 100%;
	}
	.heightLight .gouwu{
		background-image: url(../assets/C-index/购物车后.png);
	}
	.geren{
		background: url(../assets/C-index/个人中心前.png) no-repeat;
		background-size: auto 100%;
	}
	.heightLight .geren{
		background-image: url(../assets/C-index/个人中心后.png);
	}
	
</style>